<template>
  <div>
    <el-table
      ref="table"
      :max-height="maxTableHeight"
      class="qualificationTab"
      :data="currentItems"
      v-loading="loading"
      size="mini"
      border
      @selection-change="selectionChange"
      @sort-change="sortItems"
      stripe
      style="width: 100%;">
      <el-table-column
        type="index"
        label="序号"
        width="56"/>
      <el-table-column
        prop="cerNews"
        align="center"
        label="证照信息"
        show-overflow-tooltip
        width="90">
        <el-button
          @click="download(scope.row)"
          type="text"
          class="texBtn"
          size="small">下载</el-button>
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        show-overflow-tooltip
        width="80"/>
      <el-table-column
        prop="registrationNumber"
        show-overflow-tooltip
        label="注册证号"
        width="200"/>
      <el-table-column
        prop="registrantName"
        show-overflow-tooltip
        label="注册人名称"
        width="200"/>
      <el-table-column
        prop="productNameCN"
        show-overflow-tooltip
        label="产品名称(中)"
        width="200"/>
      <el-table-column
        prop="productNameEN"
        show-overflow-tooltip
        label="产品名称(英)"
        width="200"/>
      <el-table-column
        prop="expireDate"
        show-overflow-tooltip
        label="有效期至"
        width="200"/>
      <el-table-column
        prop="status"
        show-overflow-tooltip
        label="状态"
        width="200"/>
      <el-table-column
        prop="approvalDate"
        show-overflow-tooltip
        label="添加时间"
        width="200"/>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button
            @click="modifyRegistrationList(scope.row)"
            type="text"
            class="texBtn"
            size="small">修改</el-button>
          <el-button
            @click="goCertificateDetail(scope.row)"
            type="text"
            class="texBtn"
            size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      align="right"
      style="margin-top:20px;"
      @size-change="sizeChange"
      :page-sizes="PAGE_NUMBER"
      :page-size="page.size"
      :current-page="page.page"
      @current-change="pageChange"
      :layout="PAGINATION_LAYOUT"
      :total="page.total"/>

  </div>

</template>

<script>
import paginationMixin from '@mixins/paginationMixin'
import { PAGINATION_LAYOUT, PAGE_NUMBER } from '@const/common'

export default {
  name: 'IndexTable',
  mixins: [paginationMixin],
  data () {
    return {
      PAGE_NUMBER, // 页码
      PAGINATION_LAYOUT // 分页功能
    }
  },
  props: {
    certificateList: {
      type: Array,
      default: () => ([])
    },
    pageTotal: {
      type: Number,
      default: 0
    },
    loading: {
      default: true,
      type: Boolean
    }
  },
  created () {
    this.getItems()
  },
  methods: {
    getItems () {
      this.currentItems = this.certificateList
      this.page.total = this.pageTotal
    },
    modifyRegistrationList (data) {
      this.$router.push({ path: '/product/newCer', query: { data: JSON.stringify(data) } })
    },
    goCertificateDetail (data) {
      this.$router.push({
        path: '/product/certificateDetail',
        query: {
          id: data.id
        }
      })
    },
    download () {

    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/var.less';

.texBtn {
  color: @themeBlue;
}

.dangerBtn {
  color: @themeRed;
}
</style>
